@charset "utf-8";
*{
	margin: 0px;
	padding: 0px;
	box-sizing:border-box;
}
ul{
	list-style: none;
}
li{
	display: inline-block;
}
@font-face {
  font-family: 'iconfont';  /* project id 203979 */
  src: url('http://at.alicdn.com/t/font_x2dv7628pt6pf1or.eot');
  src: url('http://at.alicdn.com/t/font_x2dv7628pt6pf1or.eot?#iefix') format('embedded-opentype'),
  url('http://at.alicdn.com/t/font_x2dv7628pt6pf1or.woff') format('woff'),
  url('http://at.alicdn.com/t/font_x2dv7628pt6pf1or.ttf') format('truetype'),
  url('http://at.alicdn.com/t/font_x2dv7628pt6pf1or.svg#iconfont') format('svg');
}
body{
	height: 100vh;
}

#bg{
	display: flex;		
	flex-direction:column;
	justify-content:space-between;
	height: 100%;
  background: linear-gradient(#312135 ,#544361);
}
header{
	font-family: 'iconfont'; 
	height: 15vh;
	color: #fff;
	display: flex;
	color: #e7e3e5;
	justify-content:space-between;
	align-items:center;
	font-size: 1rem;
	padding: .5rem;
}
header>span{
	font-size: 1.2rem
}
header div{
	font-family:"微软雅黑";
	text-align: center;	
}
header .name{
	font-size: 1.2rem;
	margin-bottom: .3rem;
}
header .songer{
	display: flex;
	align-items:center;
}
header .author{
	color:#cbc1c7;
	margin-right: .2rem;
}
header .logo{
	 font-family: 'iconfont'; 
	 font-size: 0.5rem;
	 border: 1px solid transparent;
	 border-radius: 3px;
	 height: 1rem;
	 line-height: 1rem;
	 background: #51BFA4;
	 color:#e7e3e5;
}
.swiper-slide>div{
	height: 65vh;
}
/*分页器*/
.swiper-pagination-bullet{
	width:0.5rem;
	height:0.5rem;
}
/*主页   */
.page1{
	display: flex;
	flex-direction:column;
	justify-content:space-between;
	padding-bottom: 3rem;
	color:#cfd2d3;
	align-items:center;
}
.page1 div:nth-of-type(1){
	height: 17rem;
	width: 17rem;
	background: url("../image/dog.png");
	background-size: cover;
	border-radius: 50%;
}
.dog{
animation: move 4s  linear  infinite forwards ;
-moz-animation: move 4s  linear  infinite forwards;
-webkit-animation: move 4s  linear  infinite forwards;
-o-animation: move 4s  linear  infinite forwards;
}
@-webkit-keyframes move{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
.btntop{
	width: 70%;
	font-family: 'iconfont';
	color: #fff;
	font-size: 2rem;
	display: flex;
	justify-content:space-around;
	text-shadow:0rem 0rem 0rem #ccc;
}
/*进度条*/
footer{
	height: 20vh;
	display: flex;
	justify-content:center;
	flex-direction:column;
	align-items:center;
}
.progress{
	width: 86%;
	display: flex;
	align-items:center;
	justify-content:space-between;
	height: 1rem;
}
.progress span{
	color:#d6d7d8;
	padding: .1rem;
	font-size: 0.8rem;
}
.progress progress{
	margin: 0.1rem;
	width: 100%;
	height: 2px;
}
.btnButtom{
	 font-family: 'iconfont';
	 display: flex;
	 width: 86%;
	 height: 100%;
	 align-items:center;
	 justify-content:space-between;
	 font-size: 2.5rem;
	 color:#cccece;
}
.center{
	display: flex;
	justify-content:space-between;
	align-items:center;
}
.center span{
	border-radius: 50%;
	color: #ffffff;
	background: rgba(228,238,240,0.1);
	width: 3.5rem;
	height:3.5rem;
	line-height: 3.5rem;
	text-align: center;
}
.center .stop{
	width: 4.5rem;
	height:4.5rem;
	font-size: 3rem;
	line-height: 4.5rem;
	margin: 0rem 0.8rem;
}
.collect{
	color:#e76256;
}
/*歌单*/
#songMenu{
	position: absolute;
	bottom:0rem;
	height: 60%;
	z-index: 3;
	background: rgba(0, 0, 0, 0.5);
	color:#ffffff;
	display: flex;
	width: 100%;
	flex-direction:column;
	justify-content:space-between;
	
}
#songMenu>p{
	padding-left: 1rem;
	height: 4rem;
	line-height: 4rem;
	font-size: 1.5rem;
	color:#30a16d;
	font-family: 'iconfont' ,"微软雅黑";
}
#songMenu p:last-of-type{
	text-align: center;
}
#songMenu>ul{
	height: 100%;
	display: flex;
	flex-direction:column;
	border-top:1px solid #4d4648;
	border-bottom:1px solid #4d4648;
}
#songMenu>ul>li{
	height: 3rem;
	font-size: 1.2rem;
	line-height: 3rem;
	padding-left: 1rem;
	border-bottom:1px solid #4d4648;
}
.Msonger{
	font-size: 1rem;
	color:#bbb9b9;
	padding-left: 0.5rem;
}

/*//第二页*/
#page2{
	display: flex;
	width: 100%;
	flex-direction:column;
	justify-content:space-between;
	padding: 1rem;
}
#page2 li{
	padding-left: 1rem;
	height: 3rem;
	font-size: 1.2rem;
	line-height: 3rem;
	border-bottom:1px solid #686c6e;
	color:#ffffff;
}
.Psonger{
	color:#bbbab9;
	padding: 1rem;
}
.page3{
	overflow: hidden;
	overflow-y: scroll;
	padding-bottom: 6rem;
}
.page3 p{
	font-size: 1rem;
	color:#ffffff;
	padding:0px 5rem;
	line-height: 2rem;
}